<template>
  <div>
    <a-form-model ref="ruleForm" :label-col="labelColBus" :wrapper-col="wrapperCol" :model="form">
      <h3 style="margin-left: 70px">POS+零售搭配</h3>
      <a-form-model-item label="*  标题">{{ form.name }}</a-form-model-item>
      <a-form-model-item label="*  介绍"> {{ form.briefIntroduction }} </a-form-model-item>
      <a-form-model-item label="*  发布方"> {{ form.publisherName }}</a-form-model-item>
      <a-form-model-item label="*  分类" prop="cation">{{ form.classifyName }} </a-form-model-item>
      <a-form-model-item label="*  适用品牌" prop="brandId">
        <div style="display: flex">
          <div v-for="item in tags" :key="item.key">
            <span v-if="form.brand.indexOf(item.key) > -1">{{ item.value }}/</span>
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item label="*  可见渠道">
        <a-checkbox-group v-model="form.putChannel">
          <a-checkbox value="2" name="type" disabled> 直营 </a-checkbox>
          <a-checkbox value="1" name="type" disabled> 经销 </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>

      <a-form-model-item label="不可见门店">
        <a-checkbox-group v-model="form.putStoreType">
          <a-checkbox :value="item.key" v-for="(item, index) in information.notPutStoreTypeMap" :key="index" disabled> {{ item.value }} </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="*  是否生成海报" prop="shareState">
        <!-- <a-radio-group v-model="form.shareState">
              <a-radio value="3"> 使用版权 <span style="color: #aaaaaa">（明星达人等时效性素材，到期自动下架）</span></a-radio>
              <a-radio value="1"> 非版权素材—可生成二维码海报 </a-radio>
              <a-radio value="0"> 非版权素材-不可生成二维码海报 </a-radio>
            </a-radio-group> -->
        <div v-for="item in auxiliary" :key="item.key">
          <span v-if="form.isCreateBill.indexOf(item.key) > -1">{{ item.value }}</span>
        </div>
      </a-form-model-item>
      <a-form-model-item prop="copyrightId" v-if="form.isCreateBill == 3" label="展示版权信息">
        <!-- <a-select v-model="form.copyrightId" placeholder="选择版权" class="current">
              <a-select-option v-for="(item, index) in copyrightList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select> -->
        <!-- <div>展示版权信息</div> -->
        <div v-for="(item, index) in copyrightList" :key="index">
          <span v-if="form.copyrightId == item.id">{{ item.name }}</span>
        </div>
      </a-form-model-item>
      <!-- v-if="form.shareState == 0" -->
      <a-form-model-item label="*  是否生成单品海报" prop="createProductPoster" v-if="form.isCreateBill == 0">
        {{ form.createProductPoster == 0 ? '否' : form.createProductPoster == 1 ? '是' : '' }}
      </a-form-model-item>
    </a-form-model>

    <slot name="formItem" :form="form" :labelCol="labelColBus" :wrapperCol="wrapperCol"></slot>
    <slot name="formFooter" :form="form"></slot>
  </div>
</template>
<script>
import { publisher, themeDetail, themeClassify, themeDrand, themeEdit } from '@/api/pos/match'
import { copyrightList } from '@/api/pos/authority'

import { mixin } from '../mixin'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { log } from 'mathjs'
export default {
  mixins: [mixin],
  data() {
    let validateBrand = (rule, value, callback) => {
      if (this.form.brandId && this.form.brandId.length < 1) {
        callback(new Error('请选择适用品牌'))
      } else {
        callback()
      }
    }
    return {
      form: {
        id: '', //下拉菜单的ID
        isCreateBill: '', //是否生成海报
        createProductPoster: '', //是否生成单品海报
        putStoreType: [],
        classifyName: '',
        name: '',
        briefIntroduction: '',
        publisherId: '',
        brandId: [],
        brand: [],
        cation: undefined,
        putChannel: [], //渠道
        isShelf: '1', // 发布方式
        putAwayType: '1' // 发布状态
      },
      auxiliary: [
        { key: '3', value: '使用版权' },
        { key: '1', value: '非版权素材—可生成二维码海报' },
        { key: '0', value: '非版权素材-不可生成二维码海报' }
      ],
      userInfo: Vue.ls.get(USER_INFO),
      information: {},
      tags: [],
      copyrightList: [], //获取版权
      publisher: [],
      classifyList: [],
      copyList: [],
      copyIdList: [],
      retailInfo: {}
      // brandId: []
    }
  },
  created() {
    this.postPublisher()
    this.postThemeDetail()
    this.postThemeDrand()
    this.postThemeClassify()
    this.getCopyrightList()
  },
  methods: {
    // 获取版权
    async getCopyrightList() {
      const param = {
        current: 1,
        size: 100,
        status: 'Y'
      }
      const res = await copyrightList(param)
      if (res.code == 200) {
        this.copyrightList = res.data.records
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    handleChange(tag, checked) {
      // const { brandId } = this
      const nextSelectedTags = checked ? [...this.form.brandId, tag] : this.form.brandId.filter(t => t !== tag)
      this.form.brandId = nextSelectedTags
    },
    postThemeDrand() {
      themeDrand().then(res => {
        if (res.code == 200) {
          this.tags = res.data
        } else {
          // this.$message.warning(res.msg)
        }
      })
    },
    postPublisher() {
      publisher().then(res => {
        if (res.code == 200) {
          this.publisher = res.data
        } else {
          // this.$message.warning(res.msg)
        }
      })
    },
    postThemeClassify() {
      let params = {
        channelType: 'retailTheme'
      }
      return themeClassify(params).then(res => {
        if (res.code == 200) {
          this.classifyList = res.data.classifyList
          this.leafClassifyList = res.data.leafClassifyList
          return res
        } else {
          // this.$message.warning(res.msg)
        }
      })
    },
    postThemeDetail() {
      let data = {
        workNo: this.$store.getters.userInfo.workNo
      }
      themeDetail(data).then(res => {
        if (res.code == 200) {
          this.information = res.data
          this.copyIdList = res.data.classifyIds ? res.data.classifyIds.split(',') : []
        } else {
          // this.$message.error(res.msg || res.message)
        }
      })
    },
    handleProvinceChange(value) {
      let retailInfo = {
        type: 'B10-A02',
        sonType: value
      }
      this.retailInfo = retailInfo
      this.$emit('retailChange', retailInfo)
      let list = this.leafClassifyList.filter(item => item.pidCode == value)

      this.copyList = list.filter(item => this.copyIdList.includes(item.code))

      this.form.cation = null
    },
    //回显
    setData(value) {
      if (value) {
        this.form.classifyName = value.classifyName
        // let brandIdsList = value.brandIds ? value.brandIds.split(',') : []
        let brandIdsList = value.brand ? value.brand : []
        let tags = this.tags.filter(item => brandIdsList.includes(item.key))
        this.copyIdList = value.classifyIds ? value.classifyIds.split(',') : []
        let classifyIdsList = this.copyIdList.map(item => {
          return item.substring(0, 11)
        })
        this.classifyList = this.classifyList.filter(item => classifyIdsList.includes(item.code))
        this.form.name = value.name //标题
        this.form.briefIntroduction = value.briefIntroduction //介绍
        this.form.isCreateBill = value.isCreateBill + '' // 是否生成海报

        this.form.publisherId = value.publisherId // 发布方ID
        this.form.publisherName = value.publisherName // 发布方
        this.pubCopy(value.publisherId, value.publisherName)
        this.productList = value.themeDetails //商品
        // this.brandId = value.brandId ? value.brandId.split(',') : [] // 品牌
        this.form.brand = value.brand ? value.brand : [] // brand品牌
        this.form.putChannel = value.putChannel == 0 ? ['1', '2'] : value.putChannel == 1 ? ['1'] : value.putChannel == 2 ? ['2'] : [] // 可见渠道
        this.form.putStoreType = value.putStoreType ? value.putStoreType.map(item => item + '') : [] // 不可见门店
        this.backgroundImage = value.backgroundImage ? value.backgroundImage.split(',') : '' // 海报图
        // this.videoList = value.videoDetail.videoUrl ? value.videoDetail.videoUrl.split(',') : '' // 视频
        this.form.classification = value.classifyName // 分类
        this.form.createProductPoster = value.createProductPoster // 是否生成单品海报
        this.form.copyrightId = value.copyrightId
      }
    },
    pubCopy(publisherId, publisherName) {
      let flag = this.publisher.some(item => item.key == publisherId)
      if (!flag) {
        this.publisher.push({
          key: publisherId,
          value: publisherName
        })
      }
    },

    // 保存
    submitEvent(info, newLookId) {
      this.shareState = info.share.isCreateBill
      let type = this.form.putChannel.toString()
      let putChannel = type == '1' ? 1 : type == '2' ? 2 : 0
      let classList = this.copyList.filter(item => item.code == this.form.cation)
      let publisherName = this.publisher.filter(item => item.key == this.form.publisherId)
      let backgroundImage = info.share.imgList.map(item => item.url)
      let videoDetail = {
        coverUrl: info.share.coverUrl.toString(),
        videoUrl: info.share.videoUrl.toString()
      }
      let themeDetails = info.productList.map(item => {
        let theme = {
          id: '',
          themeId: '',
          productId: item.id,
          productName: item.value,
          productNo: item.name,
          productSize: '',
          productColor: item.colorno,
          productColorName: item.color_name,
          productPrice: item.price,
          productBrand: '',
          productYear: '',
          productBand: '',
          productSeason: item.small_season,
          sku: '',
          skuId: '',
          imgUrl: item.imgurl,
          sortNum: '',
          createTime: '',
          updateTime: '',
          colorCount: '',
          storeStock: '',
          ebStock: '',
          year: item.year,
          copyrightUrl: ''
        }
        return theme
      })
      let posThemeExt = {
        putChannel: putChannel, //可见渠道
        putStoreType: this.form.putStoreType.toString(), //不可见门店
        shareState: info.share.isCreateBill, //海报
        createProductPoster: info.share.isCreateBill == 1 ? '1' : this.form.createProductPoster, // 单品海报
        themeSeasons: '', // 季节
        themeYear: '', //年份
        copyrightId: ''
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = {
            id: newLookId,
            backgroundImage: backgroundImage, // 海报图
            themeDetails: themeDetails, //	商品
            name: this.form.name, //	标题
            content: this.form.content, //	简介
            brandId: this.form.brandId.toString(),
            posThemeExt: posThemeExt,
            publisherId: this.form.publisherId, // 发布方ID
            publisherName: publisherName.length > 0 ? publisherName[0].value : '', // 发布方名字
            channelType: 'B10-A02', // 一级分类
            classifyId: this.form.cation, // 二级分类id
            classifyName: classList.length > 0 ? classList[0].name : '', // 二级分类名称
            workNo: this.userInfo.workNo, // 审核人工号
            realname: this.userInfo.realname, // 审核人
            isShelf: '1', // 发布方式
            putAwayType: '1', // 发布状态
            putAwayTime: '' // 发布时间
          }
          if (info.share.videoUrl) {
            params.videoDetail = videoDetail
          }
          if (this.id && this.id != 'add') {
            Object.assign(params, {
              isConfirm: true
            })
          } else {
            Object.assign(params, {
              isConfirm: false
            })
          }
          themeEdit(params).then(res => {
            if (res.code == 200) {
              this.$message.success('零售搭配保存成功！')
            } else {
              this.$message.error(res.msg || res.message)
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-tag-checkable {
  border: 1px solid #ccc;
}
/deep/ .ant-descriptions-item-label {
  justify-content: flex-end;
  min-width: 10px;
}
</style>

